<template>
  <div class="lineChart">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { reactive } from "vue";
let result = [
  { name: "第一周", ai: 250, ai2: 399 },
  { name: "第二周", ai: 395, ai2: 493 },
  { name: "第三周", ai: 429, ai2: 410 },
  { name: "第四周", ai: 260, ai2: 597 },
  { name: "第五周", ai: 845, ai2: 492 },
  { name: "第六周", ai: 953, ai2: 793 },
  { name: "第七周", ai: 556, ai2: 412 },
  { name: "第八周", ai: 892, ai2: 993 },
  { name: "第九周", ai: 553, ai2: 480 },
  { name: "第十周", ai: 449, ai2: 468 },
];

let xData = result.map((item) => {
  return item.name;
});
let keys = ["ai", "ai2"],
  seriesData: {
    name: string;
    data: any[] | { coords: any[][] }[];
    type: string;
    yAxisIndex?: number;
    symbol: string;
    symbolSize?: number;
    barWidth?: number;
    splitNumber?: number;
    smooth: boolean;
    itemStyle?: { color: string };
    lineStyle:
    | { color: string; width: number }
    | {
      color: string;
        width: number;
        opacity: number;
        curveness: number;
    };
    areaStyle?: {
      opacity: number;
      color: {
        x: number;
        y: number;
        x2: number;
        y2: number;
        type: string;
        global: boolean;
        colorStops: { offset: number; color: string }[];
      };
      shadowColor: string;
      shadowBlur: number;
    };
    coordinateSystem?: string;
    zlevel?: number;
    polyline?: boolean;
    effect?: {
      show: boolean;
      trailLength: number;
      symbol: string;
      period: number;
      symbolSize: number;
    };
  }[] = [];
let color = ["6,196,250", "228,248,51"];
keys.forEach((key, index) => {
  seriesData.push({
    name: key + "数",
    data: result.map((item) => {
      return item[key];
    }),
    type: "line",
    yAxisIndex: 0,
    symbol: "none",
    symbolSize: 7,
    barWidth: 14,
    splitNumber: 6,
    smooth: true,
    itemStyle: {
      color: `rgba(${color[index]},1)`,
    },
    lineStyle: {
      color: `rgba(${color[index]},1)`,
      width: 1,
    },
    areaStyle: {
      opacity: 1,
      color: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        type: "linear",
        global: false,
        colorStops: [
          {
            offset: 0,
            color: `rgba(${color[index]},0.35)`,
          },
          {
            offset: 0.8,
            color: "rgba(6, 8, 41,.1)",
          },
        ],
      },
      shadowColor: "rgba(0, 0, 0, 0.1)",
      shadowBlur: 10,
    },
  });
  seriesData.push({
    name: key + "数",
    data: [
      {
        coords: result.map((item) => {
          return [item.name, item[key]];
        }),
      },
    ],
    type: "lines",
    coordinateSystem: "cartesian2d",
    zlevel: 1,
    polyline: true,
    smooth: true,
    symbol: "circle",
    effect: {
      show: true,
      trailLength: 0.4,
      symbol: "circle",
      period: 8,
      symbolSize: 8,
    },
    lineStyle: {
      color: `rgba(${color[index]},1)`,
      width: 0,
      opacity: 0,
      curveness: 0,
    },
  });
});

const option = reactive({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#fff",
      },
    },
  },
  grid: {
    //调整图表位置
    show: false, //是否显示直角坐标系网格
    top: "15%", // 一下数值可为百分比也可为具体像素值
    right: "5%",
    bottom: "10%",
    left: "10%",
  },
  legend: {
    top: "5%",
    data: [
      {
        name: "本学期",
        color: "#A9DDEE", // 单独设置某一个图列的颜色
      },
      {
        name: "上学期",
        color: "#A9DDEE", // 单独设置某一个图列的颜色
      },
    ],
  },
  xAxis: [
    {
      type: "category",
      data: ["A类", "B类", "C类", "D类", "E类", "F类", "G类", "H类"],
      axisPointer: {
        type: "shadow",
      },
      axisLine: {
        lineStyle: {
          color: "#ccc",
        },
      },
      axisTick: {
        lineStyle: {
          color: "#ccc",
        },
      },
      axisLabel: {
        color: "#555",
        fontSize: 12,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      // min: 0,
      // max: 250,
      // interval: 50, // y轴 两刻度之间的差值
      barWidth: "35%",
      splitLine: {
        show: true,
        lineStyle: {
          color: "#555",
          type: "dashed",
          opacity: 0.1,
        },
      },
      axisLabel: {
        color: "#555",
        formatter: "{value}",
        fontSize: 12,
      },
    },
  ],
  series: [
    {
      name: "本学期",
      type: "line",
      barWidth: "20%",
      tooltip: {
        valueFormatter: function (value: string) {
          return value + " 个";
        },
      },
      data: [40, 50, 60, 65, 54, 65, 60, 50],
      itemStyle: {
        color: "#23C185",
      },
      label: {
        show: true, // 开启显示
        position: "top", // 在上方显示
        distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
        verticalAlign: "middle",
          // 数值样式
          color: "#23C185",
          fontSize: 12,
      },
    },
    {
      name: "上学期",
      type: "line",
      tooltip: {
        valueFormatter: function (value: string) {
          return value + " 个";
        },
      },
      data: [35, 62, 84, 52, 44, 96, 78, 66],
      itemStyle: {
        color: "#4CD4F2",
      },
      label: {
        show: true, // 开启显示
        position: "top", // 在上方显示
        distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
        verticalAlign: "middle",
          // 数值样式
          color: "#4CD4F2",
          fontSize: 12,
      },
    },
  ],
});
</script>

<style scoped lang="scss">
.lineChart {
  height: 100%;
}
</style>
